<template>
  <section class="department_detail_table">
    <div class="department_detail_table__header">
      <span>部门人员名单</span>
      <!-- <el-button style="float: right"
                 size="mini"
                 type="primary"
                 @click="handleExport">批量导出</el-button> -->
    </div>
    <el-table stripe
              align="center"
               row-key="id"
              :data="tableData"
              style="width: 100%">
      <!-- <el-table-column type="selection"
                       width="55"
                       @selection-change="handleSelectionChange">
      </el-table-column> -->
      <el-table-column prop="userName" label="部门成员名称"></el-table-column>
      <el-table-column prop="sn" label="成员账户"></el-table-column>
      <el-table-column label="岗位">
        <template slot-scope="scope">
          <div v-if="scope.row.jobList">
            <span v-for="(item, index) in scope.row.jobList"
                  :key="index">{{item.name}}{{index !== scope.row.jobList.length - 1? '，': ''}}</span>
          </div>
          <div v-else>无</div>
        </template>
      </el-table-column>
      <el-table-column width="210"
                       label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="department_detail_table__pagination" v-if="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagination.pageNum"
                     :page-sizes="[10, 20, 30]"
                     :page-size="pagination.size"
                     layout="prev, pager, next, sizes, jumper"
                     :total="pagination.total"></el-pagination>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "organizationDepartmentDetailTable",
  data () {
    return {
      isSizeChange: false,
      multipleSelection: []
    };
  },
  computed: {
    ...mapGetters({
      tableData: "departmentDetail/tableData",
      tableParams: "departmentDetail/tableParams",
      pagination: "departmentDetail/pagination"

    })
  },
  methods: {
    ...mapActions({
      fetchTableData: "departmentDetail/fetchTableData",
    }),
    async handleSizeChange (val) {
      this.isSizeChange = true
      await this.fetchTableData({
        ...this.tableParams,
        size: val,
        page: 1
      })
    },
    async handleCurrentChange (val) {
      if (this.isSizeChange) {
        this.isSizeChange = false
        return
      }
      await this.fetchTableData({
        ...this.tableParams,
        page: val
      })
    },
    handleDetail (index, row) {
      this.$router.push({name: 'userDetail', params: {sn: row.sn}})
    },
    handleExport () { },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.department_detail_table {
  margin: 16px 0;
}
.department_detail_table__pagination {
  margin: 16px 0;
  text-align: right;
}
.department_detail_table__header {
  margin-bottom: 16px;
  line-height: 30px;
}
</style>
